<template>
  <div class="container">
    <div>
      <label for="">名称:</label>
      <select v-model="queryParams.type">
        <option value="">请选择</option>
        <option value="name">姓名</option>
        <option value="gender">性别</option>
        <option value="phone">电话</option>
      </select>
      <input type="text" v-model.trim="queryParams.value" v-if="showInput" />
      <select v-else v-model="queryParams.value">
        <option value="1">男</option>
        <option value="0">女</option>
      </select>
      <button @click="search">搜索</button>
      <button @click="addDirectorDialog">增加</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>电话</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in directorList" :key="item._id">
          <td>{{ item._id }}</td>
          <td style="width: 150px">{{ item.name }}</td>
          <td>{{ item.gender==1?"男":"女"}}</td>
          <td>{{ item.phone }}</td>
          <td style="width: 120px">
            <button class="del_btn" @click="removeDirect(item._id)">删除</button>
            <button class="modify_btn" @click="updateDirectDialog(item)">修改</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div v-show="visiableAddDialog" class="addDialog">
      <h3>增加班主任</h3>
      <div>
        <label for="">姓名：</label>
        <input type="text" v-model="director.name" />
      </div>
      <div>
        <label for="">性别：</label>
        <select v-model="director.gender">
          <option value="1">男</option>
          <option value="0">女</option>
        </select>
      </div>
      <div>
        <label for="">电话:</label>
        <input type="text" v-model="director.phone" />
      </div>
      <div>
        <button @click="addDirectorApi">增加</button>
      </div>
    </div>


   <!-- 修改的模态框 -->
    <div v-show="visiableUpdateDialog" class="addDialog">
      <h3>修改班主任</h3>
      <div>
        <label for="">姓名：</label>
        <input type="text" v-model="updateDirector.name" />
      </div>
      <div>
        <label for="">性别：</label>
        <select v-model="updateDirector.gender">
          <option value="1">男</option>
          <option value="0">女</option>
        </select>
      </div>
      <div>
        <label for="">电话:</label>
        <input type="text" v-model="updateDirector.phone" />
      </div>
      <div>
        <button @click="modifyDirectorApi">修改</button>
      </div>
    </div>



  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      queryParams: {
        type: "",
        value: "",
      },
      directorList: [],
      showInput: true,
      director:{
        name:'',
        gender:1,
        phone:''
      },
      updateDirector:{
        name:'',
        gender:1,
        phone:''
      },
      visiableAddDialog:false,
      visiableUpdateDialog:false
    };
  },
  watch: {
    "queryParams.type"(newval) {
      this.queryParams.value = "";
      if (newval == "name" || newval == "phone") {
        this.showInput = true;
      } else if (newval == "gender") {
        this.showInput = false;
      }
    },
  },
  methods: {
    async getDirectorApi() {
      const result = await axios.get(
        "http://www.zhaijizhe.cn:3005/directors/getDirectors"
      );
      this.directorList = result.data.data.result;
    },
    async search() {
      console.log("type", this.type, "value", this.value);
      /*
           axios.get(参数1,参数2)
           参数1：url地址
           参数2：配置对象，常见的选项
           params:这个是传递的是GET请求的参数
        */
      const result = await axios.get(
        "http://www.zhaijizhe.cn:3005/directors/getDirectors",
        {
          params: this.queryParams,
        }
      );

      // const result= await axios({
      //     url:'http://www.zhaijizhe.cn:3005/directors/getDirectors',
      //     params:this.queryParams
      // })
      this.directorList = result.data.data.result;
    },
    //弹框完成增加的信息的录入
    addDirectorDialog() {
      //显示增加的模态框
      this.visiableAddDialog=true
    },
    async addDirectorApi(){
      //获取文本框中信息
      console.log(this.director);
      /*
        axios的POST请求的简写形式的语法
        axios.post(参数1，参数2，参数3)
        参数1：请求的目标路径
        参数2：请求的数据对象:{属性名:值,属性名2:值2}
        参数3：配置对象
      */
     const result=await axios.post('http://www.zhaijizhe.cn:3005/directors/addDirectors',this.director)
     if(result.data.code){
       alert(result.data.message)
       //关闭增加的模态框窗口
       this.visiableAddDialog=false
       //重新调用一下查询所有的班主任信息的后端api方法
       this.getDirectorApi()
     }
    },
    //删除班主任的api方法
    async removeDirect(_id){
      console.log('id',_id);
      /**
       * axios的删除的方法简写形式
       * axios.delete(参数1，参数2)
       * 参数1：目标的路径
       * 参数2:配置对象，配置对象中常见的选项
       * params:传递query(?key=value&key2=value2)类型的参数
       * data:传递body的类型的参数
       */

       /**
        * 预检请求：发两次请求，哪些是属于预检请求，下面三种情况
        * 1）除了GET,POST之外的请求方式
        * 2）请求头中携带了自定义请求信息
        * 3) 请求的Content-Type是application/json
        * 
        * 载荷
        * 
        */
      const result=await axios.delete("http://www.zhaijizhe.cn:3005/directors/deleteDirectors",{
        data:{
          _id
        }
      })
       if(result.data.code){
       //重新调用一下查询所有的班主任信息的后端api方法
       this.getDirectorApi()
     }
    },
    // 打开修改班主任的模态框
    updateDirectDialog(item){
      //打开模态框
      this.visiableUpdateDialog=true
      //根据id获取到当前的用户信息
      console.log('item',item);
      //将传递进来的班主任对象赋值给data中的updateDirector
      this.updateDirector={...item}
    },
    async modifyDirectorApi(){
      console.log('修改后的数据',this.updateDirector);
      //删除某个对象中属性:语法是 delete 对象.属性
      delete this.updateDirector.isDelete
      const result=await axios.put("http://www.zhaijizhe.cn:3005/directors/updateDirectors",this.updateDirector)
      if(result.data.code){
        //关闭掉模态框
        this.visiableUpdateDialog=false
        this.getDirectorApi()
      }

    }
  },
  created() {
    this.getDirectorApi();
  },
};
</script>

<style>
table {
  width: 700px;
  border-collapse: collapse;
}
td,
th {
  border: 1px solid #000;
  padding: 5px;
}
th {
  background-color: orange;
  color: white;
}
.del_btn {
  width: 50px;
  height: 30px;
  background-color: #c00;
  color: white;
  border: none;
}
.modify_btn {
  width: 50px;
  height: 30px;
  background-color: skyblue;
  color: white;
  border: none;
}
.upDialog {
  background: #f5f5f5;
  padding: 10px;
  left: 100px;
  top: 100px;
  position: absolute;
}
.container{
  position: relative;
}
.addDialog{
  position:absolute;
  top:100px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  padding: 10px;
  background-color: #ccc;
}
</style>
